<template>
  <div class="userconfirm">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goMine">
      </div>
      <span slot="center">
        实名认证
      </span>
    </topHeader>
    <div class="userconfirm_con">
      <div class="car_box">
        <div class="title">
          真实姓名
        </div>
        <div class="input_box">
          <input type="text" placeholder="请输入您的真实姓名" v-model="params.name">
        </div>
      </div>
      <div class="car_box">
        <div class="title">
          身份证号
        </div>
        <div class="input_box">
          <input type="text" placeholder="请输入您的身份证号" v-model="params.idcardNum">
        </div>
      </div>
      <div class="idcard_img_box">
        <div class="idcard_img_title">
          身份证人像面
        </div>
        <div class="idcard_img">
          <img src="./../../assets/img/zhengmian.png" alt="" v-if="idCardASrc1===null">
          <img :src="idCardASrc1" v-else>
          <input type="file" accept="image" ref="inputer" @change="handleFileChange">
        </div>
      </div>
      <div class="idcard_img_box">
        <div class="idcard_img_title">
          身份证国徽面
        </div>
        <div class="idcard_img">
          <img src="./../../assets/img/zhengmian.png" alt="" v-if="idCardBSrc1===null">
          <img :src="idCardBSrc1" v-else>
          <input type="file" accept="image" ref="inputer1" @change="handleFileChange1">
        </div>
      </div>
      <div class="summit_btn" @click="sumitIdCard">
        提交认证
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import{ userConfirm } from '@/api/allapis'
import topHeader from './../../components/topHeader'
export default {
  data () {
    return {
      params:{
        idcardZ:{},
        idcardB:{},
        name:'',
        idcardNum:'',
        userId:''
      },
      idCardASrc: null,
      idCardASrc1: null,
      idCardBSrc: null,
      idCardBSrc1: null,
    }
  },

  components: {
    topHeader
  },
  watch:{
    idCardASrc(newVal, oldVal){
      this.idCardASrc1 = newVal
    },
    idCardBSrc(newVal, oldVal){
      this.idCardBSrc1 = newVal
    }
  },
  computed: {},

  mounted () {
    this.$vux.loading.hide()
  },

  methods: {
    goMine () {
      this.$router.go(-1)
    },
    handleFileChange (e) {
      let self = this
      let inputDOM = this.$refs.inputer
      this.params.idcardZ = inputDOM.files[0]
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let file = files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        file["base64"] = e.target.result;
        self.idCardASrc = file["base64"]
      }
    },
    handleFileChange1 (e) {
      let self = this
      let inputDOM = this.$refs.inputer1
      this.params.idcardB = inputDOM.files[0]
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let file = files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        file["base64"] = e.target.result;
        self.idCardBSrc = file["base64"]
      }
      // if (this.params.idcardB) {
      //   // this.uploadIMG()
      //   this.idCardBSrc = this.getObjectURL(inputDOM.files[0])
      //   console.log(this.params.idcardB)
      // }
    },
    getObjectURL(file) {
      var url = null ;
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
      } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
    },
    sumitIdCard () {
      this.params.userId = this.$store.state.user.uerInfo.id
      this.$vux.loading.show({ text: '认证中' })
      userConfirm(this.params).then(res => {
        console.log(res)
        this.$vux.loading.hide()
        if(res.data === '身份证认证成功'){
          this.$vux.alert.show({
            title: '人人同行提示',
            content: '认证成功',
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          this.$router.push('confirmsuccess')
        } else {
          this.$vux.alert.show({
            title: '人人同行提示',
            content: res.data,
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./userconfirm.less');
</style>